<div>
	<script type="text/javascript">



$(document).ready(function(){
	 $.getJSON('index.php/welcome/test', function(data) {

		 if(data['error'] == '-1'){
			 $('#workflow-mgmt-title').html('Workflow not present.');
		 }else{

		 $('#workflow-mgmt-title').html("<span key="+data['workflow_service_id']+">"+data['workflow_name']+"</span>");

		 $('#workflow-mgmt-title').attr("title",data['workflow_name']);
		 $('#workflow-mgmt-title').attr("key",data['workflow_service_id']);
		 
 		 var screen=0;
 		 htmltext='<div class="droppable2 ui-widget-header" id="element 0">';
 		htmltext=htmltext+'<p>Unused services</p>';
 		htmltext=htmltext+'<ul id="ul-screen-0" key="0" class="sortable boxy">';
 		var list = document.getElementById("one");
 		

 		 htmltag=$('#screen-div-parent2');

 		 
		 $.each(data['service_array'], function(key, val) {

	    	 if(screen == val['screen_position']){

				 htmltext=htmltext+'<li key='+val['service_id']+'>'+val['descr']+'</li>';
			 }else if( screen+1 == val['screen_position']){

				 //Add the tail
				 htmltext=htmltext+getTailText();
	
				 htmltext = htmltext + getHeadText(val,screen);
				 screen++;

				 htmltext=htmltext+'<li key='+val['service_id']+'>'+val['descr']+'</li>';
			 }
			 	
		 });
		 htmltag.html(htmltext);

		 var i=0;
		 for(i=0;i<=6;i++){
			 list = document.getElementById("ul-screen-"+i);
			 DragDrop.makeListContainer( list );
		 };

		 }
	 });

	 
	$('#saveButton').click(function(){

		console.log("Button clicked");
		var workFlowArray={};
		var servicesArray=new Array();
		$('ul.sortable').each(function(){
			var ulTag=$(this);
			
			var i=0;
			ulTag.children().each(function(){
				var service={};
				service['ws_id']=$(this).attr('pkey');
				service['service_id']=$(this).attr('key');
				service['descr']=$(this).html();
				service['screen_position']=ulTag.attr('key');
				service['screen_order']=i+1;
				servicesArray[$(this).attr('key')]=service;
				i++;
			});
		});
		
		workFlowArray['workflow_name']=$('#workflow-mgmt-title').attr("title");
		workFlowArray['workflow_service_id']=$('#workflow-mgmt-title').attr("key");
		workFlowArray['service_array']=servicesArray;
		console.log(JSON.stringify(workFlowArray));
		var dataString='&arrayString='+JSON.stringify(workFlowArray);
		console.log(dataString);
		$.ajax({
			type: "POST",
				url: "index.php/welcome/testPost",
				data: dataString,
				success : function(data){
					alert(data);
				}
		});
		
	});
});

</script>
	<div id="workflow-mgmt-title">&nbsp</div>
	<hr />
	<div id="screen-div-parent2"></div>
	<div style="clear: both;">&nbsp;</div>

</div>
<div id="resultText">&nbsp;</div>
<div>
	<button id="saveButton">Save</button>
</div>
<div style="clear: both;">&nbsp;</div>

